<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>HTML and CSS Examples</title>
</head>

<body>
    <main>
        <div class="card">
            <ul>
                <li>
                    <a href="01-typewriter-effect">打字机效果</a>
                </li>
                <li>
                    <a href="02-face-mask-effect">人脸识别带口罩</a>
                </li>
                <li>
                    <a href="03-slide-image-effect">响应式图片轮播</a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="04-parallax-effect">视差滚动特效</a>
                </li>
                <li>
                    <a href="05-3d-cubic-images">3d立方体展示</a>
                </li>
                <li>
                    <a href="06-range-slider">滚动条滑动</a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="08-frame-animation">帧动画案例</a>
                </li>
                <li>
                    <a href="09-svg-circle">SVG动画案例</a>
                </li>
                <li>
                    <a href="10-it-website">科技公司案例</a>
                </li>
            </ul>
        </div>
    </main>
</body>

</html>